import React from "react";
import { Card, Select, Rate, Input, Menu, Dropdown, Button, Tag} from "antd";
import { DownOutlined } from '@ant-design/icons';
import "./player.css";

const { Option } = Select;
const { TextArea } = Input;

class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      role: "unknow",
      roleList: [
        {
          label: "未知",
          value: "unknow",
        },
        {
          label: "村民",
          value: "villager",
        },
        {
          label: "狼人",
          value: "wolf",
        },
        {
          label: "预言家",
          value: "prophet",
        },
        {
          label: "女巫",
          value: "witch",
        },
        {
          label: "猎人",
          value: "hunter",
        },
        {
          label: "守卫",
          value: "guard",
        },
      ],
      tags:[false, false]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    
  }

  numberPosition(sider) {
    if (sider === "right") {
      return "{left: -7.5vh}";
    } else {
      return "{right: -7.5vh";
    }
  }

  cardColor(role) {
    if (role === "unknow") {
      return;
    }
    return role;
  }

  handleChange(value) {
    this.setState({ role: value });
    console.log(value);
  }

  handleClick(index) {
    const tags = this.state.tags.slice();
    tags[index] = true;
    this.setState({
      tags: tags,
    })
  }

  handleClose(index) {
    const tags = this.state.tags.slice();
    tags[index] = false;
    this.setState({
      tags: tags,
    })
  }

  
  render() {
    const roleList = this.state.roleList;
    const roles = roleList.map((role, index) => {
      return (
        <Option key={index} value={role.value}>
          {role.label}
        </Option>
      );
    });

    const menu = (
      <Menu>
        <Menu.Item>
          <Button type="link" size='small' onClick={() =>this.handleClick(1)}>
            银水
          </Button>
        </Menu.Item>
        <Menu.Item>
          <Button type="link" size='small' onClick={() =>this.handleClick(0)}>
            金水
          </Button>
        </Menu.Item>
      </Menu>
    );

    

    return (
      <div className={this.state.role}>
        <Card
          className={`player ${
            this.props.numIsLeft ? "player-left" : "player-right"
          }`}
        >
          <div className="info">
            <div className="info-base">
              <label>身份:</label>
              <Select value={this.state.role} onChange={this.handleChange}>
                {roles}
              </Select>
              <label>发言评价：</label>
              <Rate className="rate" allowHalf="true"></Rate>
            </div>
            <div className="infp-detail">
              <label>发言详情：</label> 
              <span style={{marginLeft:'10px'}}>
                <Dropdown overlay={menu}>
                  <a href="#!">
                    添加标签 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
              <TextArea className="textarea" bordered={false}></TextArea>
            </div>
          </div>
          <div
            className={`
          number 
          ${this.props.numIsLeft ? "number-left" : "number-right"}`}
          >
            {this.props.number}
          </div>
          <div className={`${this.props.numIsLeft ? 'tags-right' : 'tags-left'}`}>
            <Tag color='#f6b93b' closable visible={this.state.tags[0]} onClose={() => this.handleClose(0)}>金水</Tag>
            <Tag color='#c8d6e5' closable visible={this.state.tags[1]} onClose={() => this.handleClose(1)}>银水</Tag>
          </div>
        </Card>
      </div>
    );
  }
}

export default Player;
